@import "layout";

* {
  margin: 0px;
  padding: 0px;
}

//ddd

@function toRem($num) {
  @return $num/16+rem;
}

$winW-list: 360, 400, 440, 480, 520, 560, 600, 640;
@each $item in $winW-list {
  @media only screen and (min-width: #{$item}px) {
    html {
      font-size: #{$item/20}px !important;
    }
  }
}

.item {
  width: toRem(100);
  height: toRem(100);
  background: red;
  margin: toRem(10);
}

.flexbox {
  display: flex;
}

.flex1 {
  flex: 1;
}

.align-items-center {
  align-items: center;
}

.main {
  .head {
    width: toRem(45);
    height: toRem(45);
    margin: toRem(10);
    overflow: hidden;
    border-radius: 100%;
    img {
      width: 100%;

    }
  }
  .info {
    .top {
      display: flex;
      p {
        margin: 0px;
        font-size: toRem(14);
      }
      .time {
        color: #c9c9c9;
        font-size: toRem(13);
      }
    }
    .bottom {
      margin-top: toRem(5);
      color: #c9c9c9;
      font-size: toRem(13);
    }
  }
  padding: 0 toRem(5) 0 0;
  border-bottom: toRem(1) solid #f9f9f9;
  &:active {
    background: #fcfcfc;
  }
}

.g9 {
  .row {
    display: flex;
    .box {
      flex: 1;
      height: 10em;
      width: 10em;
      border: toRem(1) solid #f9f9f9;
      background: blue;
      .in {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }
}

header {
  height: toRem(50);
  background: #18b4ed;
  color: #fff;
  .head {
    width: toRem(30);
    height: toRem(30);
    margin: toRem(10);
    overflow: hidden;
    border-radius: 100%;
    img {
      width: 100%;

    }
  }
}

footer {
  height: toRem(50);
  background: #fff;
  border-top: 1px solid #f9f9f9;
}

.all, html, body {
  height: 100%;
  overflow: hidden;
}

.center-box {
  height: toRem(1);
  overflow: auto;
}

.fbox {
  &:active {
    background: #f1f1f1;
    i, p {
      color: #18b4ed;
    }

  }
  i {
    font-size: toRem(24);
  }
  p {
    font-size: toRem(10);
  }

}

.active {
  i, p {
    color: #18b4ed;
  }
}

.seach {
  margin: toRem(5) auto;
  width: 95%;
  height: toRem(20);
  background: #f1f1f1;
  border-radius: toRem(5);
  font-size: toRem(12);
  color: #8a8a8a;
  i {
    font-size: toRem(14);
  }
}

.item_dt{
  border-bottom: 1px solid #f1f1f1;


  padding: toRem(5) toRem(5);
  p{
    padding-left: toRem(5);
    font-size: toRem(12);
  }
  i{
    font-size: toRem(14);
  }
}

.wrap{
  .siler{
    position: absolute;
    background-color: blue;
    height: 100%;
    width: 75%;
    z-index: 5;
    left: -75%;
  }
  transition: ease-in-out 0.5s;
  &.open{
    transform: translateX(75%);
  }
}